<template>
  <el-dialog class="dialog" title="绑定呼叫器" center="center" :visible.sync="show" :before-close="hideDialog">
    <!--<div>
      <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
        <el-form-item>
          <el-button type="primary" plain icon="fa fa-chain" @click="handleBinding" size="mini">
            批量绑定
          </el-button>
        </el-form-item>
        <el-form-item prop="equipType">
          <el-select size="mini" v-model="filters.equipType" @change="selectChange">
            <el-option v-for="item in safetyList" :label="item.name" :value="item.id" :key="item.id">

            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>-->

    <!-- 列表 -->
    <el-table ref="tableList" :data="dataList" :fit="true" highlight-current-row max-height="600"
               empty-text="对不起，没有找到相关数据！">
      <!--<el-table-column type="selection" width="50" align="center"></el-table-column>-->
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="equipName" label="呼叫器名称" width="180" align="center"></el-table-column>
      <el-table-column label="编号/MAC" width="160" align="center">
        <template slot-scope="scope">
						<span>
							{{ scope.row.equipCode }}
						</span><br/>
          <span>{{ scope.row.equipMac }}</span>
        </template>
      </el-table-column>
      <el-table-column label="呼叫器类型" align="center">
        <template slot-scope="scope">
						<span>
							<el-tag size="mini" effect="dark" :type="formatBeeperTypes(scope.row.beeperType)">
								{{ formatBeeperType(scope.row.beeperType) }}
							</el-tag>
						</span><br/>
          <span>{{ $Filters.formatBeeperVersion(scope.row.beeperVersion) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="呼叫器状态" lign="center" width="100" align="center">
        <template slot-scope="scope">
						<span v-if="scope.row.beeperVersion != 1">
							<el-tag size="mini" effect="dark" :type="formatBeeperStates(scope.row.equipState)">
								{{ formatBeeperState(scope.row.equipState) }}
							</el-tag>
						</span>
          <span v-if="scope.row.beeperVersion == 1">
							<el-tag size="mini" effect="dark" :type="scope.row.equipState == 1 ? '' : 'success'">
								{{ scope.row.equipState == 1 ? "未激活" : "在线" }}
							</el-tag>
						</span>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="90" align="center"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClickDetail(scope.row)" size="mini">查看</el-button>
        </template>
      </el-table-column>

    </el-table>

  </el-dialog>
</template>
<script>
  import BeeperApi from "@/api/equip/beeper"

  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      id: {
        type: Number | String
      }
    },
    watch: {
      show(val) {
        if (val) {
          this.listData()
        }
      },
    },
    data() {
      return {
        dataList: [],
        filters: {

        },
        selectedIds: [],
      }
    },
    components: {},
    methods: {
      handleClickDetail(row) {
        let _this = this
        _this.$router.push({
          path: '/equip/beeperManagement',
          query: { equipCode: row.equipCode }
        })

      },
      hideDialog() {
        this.$emit("cancel")
      },
      formatBeeperType(cellValue) {
        if (cellValue === 1) {
          return "公共"
        } else if (cellValue === 2) {
          return "专属"
        }
      },
      formatBeeperTypes(cellValue) {
        if (cellValue === 2) {
          return 'success'
        } else if (cellValue === 1) {
          return 'danger'
        }
      },
      formatBeeperState(cellValue) {
        if (cellValue === 0) {
          return '未开通'
        } else if (cellValue === 1) {
          return '未激活'
        } else if (cellValue === 2) {
          return '在线'
        } else if (cellValue === 3) {
          return "离线"
        }
      },
      formatBeeperStates(cellValue) {
        if (cellValue === 0) {
          return 'danger'
        } else if (cellValue === 1) {
          return ''
        } else if (cellValue === 2) {
          return 'success'
        } else if (cellValue === 3) {
          return 'info'
        }
      },
      handleSelectionChange(arr) {
        this.selectedIds = arr.map(item => item.beeperId)
      },
      listData() {
        // 获取列表数据
        let _this = this
        let cond = {
          serverModelId: _this.id
        }
        BeeperApi.listByParam(cond)
          .then(res => {
            _this.dataList = res.data
            setTimeout(() => {
              _this.$refs.tableList.doLayout()
            })
          }).catch(err => {
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .dialog {
    &::v-deep .el-dialog {
      width: max-content;
    }

    .el-radio-group {
      margin-left: 10px;

      .el-radio {
        margin-right: 20px;
      }
    }

    .img-wrapper {
      width: 80px;
      height: 60px;
      overflow: hidden;
      border-radius: 3px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;

      .el-image {
        width: 100%;

        &::v-deep img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
</style>

